<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div
        style="
          width: 70px;
          height: 70px;
          border-radius: 4px;
          background: #00cc00;
          text-align: center;
          line-height: 70px;
          color: white;
        "
      >
        站点列表
      </div>
      <div class="q-ml-md">
        <div>站点</div>
        <div class="row">
          <q-select
            dense
            square
            outlined
            v-model="type"
            class="q-mt-sm"
            style="width: 250px"
            :options="option"
          >
          </q-select>
          <q-select
            dense
            square
            outlined
            v-model="type2"
            class="q-mt-sm q-ml-xs"
            style="width: 250px"
            :options="option"
          >
          </q-select>
        </div>
      </div>
      <div style="margin-left: 100px;">
        <img :src="require('src/assets/newIcon/5.png')" style="width:110px"/>
        <img :src="require('src/assets/newIcon/6.png')"  style="width:95px;margin-left:30px"/>
        <img :src="require('src/assets/newIcon/7.png')"  style="width:300px;margin-left:50px"/>
      </div>
    </div>
    <div class="greenLine"></div>
    <div>
      <div class="row items-center">
        <q-select
          dense
          v-model="type3"
          class="q-ml-md"
          bg-color="primary"
          color="white"
          style="width: 200px;"
          :options="option"
        >
        </q-select>
        <q-space />
        <span style="color: #00cc00; font-size: 16px;margin-right: 8px;">电参数</span>
        <q-btn label="电流" color="grey" size="md" />
        <q-btn label="电压" color="primary" size="md" class="q-ml-xs" />
        <q-btn label="功率" color="grey" size="md" class="q-ml-xs" />
        <q-btn label="温度" color="grey" size="md" class="q-ml-xs" />
        <q-btn label="谐波" color="grey" size="md" class="q-ml-xs" />
        <q-btn label="功率因数" color="grey" size="md" class="q-ml-xs" />
      </div>
      <div
        id="lineChart"
        class="test-wrepper"
        :style="[{ width: '100%' }, { height: 300 + 'px' }]"
      ></div>
      <div
        id="lineChart2"
        class="test-wrepper"
        :style="[{ width: '100%' }, { height: 300 + 'px' }]"
      ></div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import resize from "src/components/mixins/resize.js";

let chart = null,
  chart2;
export default defineComponent({
  mixins: [resize],
  name: "ceshi1",
  components: {},
  data() {
    return {
      defaultOption: null,
      type: "CYD2023135674",
      type2: "中国-北京-海淀 金隅智造工厂",
      type3: "2023-05",
      option: [2019, 2021, 2022, 2023],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    // 初始化echarts实例
    initEcharts(chart, chart2) {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      chart = echarts.init(document.getElementById("lineChart"));
      chart.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart.setOption(this.handlerDefaultOption(), true);
      this.chart = chart;
      if (this.chart2) {
        this.chart2.dispose();
        this.chart2 = null;
      }
      chart2 = echarts.init(document.getElementById("lineChart2"));
      chart2.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart2.setOption(this.handlerDefaultOption2(), true);
      this.chart2 = chart2;
    },
    // 处理echarts配置项
    handlerDefaultOption() {
      this.defaultOption = {
        title: {
          text: "A相电压",
          left: "50%",
          textStyle: {
            color: "#333",
            fontSize: 18,
          },
        },
        tooltip: {},
        grid: {
          left: "5%",
          right: "5%",
        },
        xAxis: {
          data: ["m1", "m2", "m3", "m4", "m5", "m6"],
        },
        yAxis: {
          name: "电压（V）",
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: [5123, 2012, 3644, 1023, 120, 2410],
            itemStyle: {
              color: "#53D42C",
            },
          },
        ],
      };

      return this.defaultOption;
    },
    handlerDefaultOption2() {
      this.defaultOption = {
        title: {
          text: "B相电压",
          left: "50%",
          textStyle: {
            color: "#333",
            fontSize: 18,
          },
        },
        grid: {
          left: "5%",
          right: "5%",
        },
        tooltip: {},
        xAxis: {
          data: ["m1", "m2", "m3", "m4", "m5", "m6"],
        },
        yAxis: {
          //   name: "电压",
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: [5123, 2012, 3644, 1023, 120, 2410],
            itemStyle: {
              color: "#53D42C",
            },
          },
        ],
      };

      return this.defaultOption;
    },
  },
});
</script>

<style lang="scss" scoped></style>
